import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import store from '../../../store/store'
import '@css/home/home_header.scss'

export default class HomeHeader extends Component{
    constructor(props) {
        super(props)
        this.state = {
            city: store.getState(),
            nowStyle: {},
            headerStyle:{
                color: '#fff'
            }
        }
        this.header = React.createRef()
        // store.subscribe(this.getStoreState)
    }

    render() {
        return <div className="header" ref={ this.header } style={this.state.nowStyle}>
            <div className="left">
                <Link to="/city" className="citybox" onClick={this.clickCity} style={this.state.headerStyle}>
                    <div className="city">{this.state.city}</div>
                    <i className="iconfont icon-arrow">&#xe612;</i>
                </Link>
                <div className="weather">多云 14°</div>
            </div>
            <div className="mid">
                <div className="inputbox">
                    <i className="iconfont icon-search">&#xe62e;</i>
                    <input type="text" placeholder="输入搜索名称"/>
                </div>
            </div>
            <div className="iconfont right">&#xe626;</div>
        </div>
    }
    // 获取最新的city数据
    getStoreState = ()=>{
        let newState = store.getState()
        this.setState({
            city: newState
        })
    }
    componentDidMount() {
        //console.log(this.header.current)
        let nowBGC = window.getComputedStyle(this.header.current).backgroundColor;
        let regex = /rgb\((\d+), ?(\d+), ?(\d+)\)/
        let rgbArr = nowBGC.match(regex).splice(1, 3)
        // 转换rgb为hex
        let hexColor = this.rgbToHex(rgbArr[0],rgbArr[1],rgbArr[2])
        // 通过颜色渐变函数，获取渐变数组
        this.colorArr = this.gradient(hexColor, '#ffffff', 120)
        window.addEventListener('scroll', this.handleScroll)

    }
    // 必须通过箭头函数赋值 的方式，才可以绑定全局this。或者也可以自己直接在construct内绑定this。
    handleScroll = ()=> {
        let top = document.documentElement.scrollTop;
        if(top > 30) {
            if(top < 120 ) {
                this.setState({
                    nowStyle: {
                        backgroundColor: this.colorArr[top],
                        color: '#666'
                    },
                    headerStyle: {color: '#666'}
                })
            }else{
                this.setState({
                    nowStyle: {
                        backgroundColor: "#fff",
                        color: '#333'
                    },
                    headerStyle: {color: '#333'}
                })
            }
        }else{
            this.setState({
                nowStyle: {
                    backgroundColor: this.colorArr[0],
                    color: '#fff'
                },
                headerStyle: {color: '#fff'}
            })
        }
    }
    // 颜色渐变转换
    gradient (startColor,endColor,step){
        //将hex转换为rgb
        var sColor = this.hexToRgb(startColor)
        var eColor = this.hexToRgb(endColor)
  
        //计算R\G\B每一步的差值
        var rStep = (eColor[0] - sColor[0]) / step,
            gStep = (eColor[1] - sColor[1]) / step,
            bStep = (eColor[2] - sColor[2]) / step;
  
        var gradientColorArr = [];
        for(var i=0;i<step;i++){
            //计算每一步的hex值
            gradientColorArr.push(this.rgbToHex(parseInt(rStep*i+sColor[0]),parseInt(gStep*i+sColor[1]),parseInt(bStep*i+sColor[2])));
        }
        return gradientColorArr;
      }
      // rgb转换hex
      rgbToHex(r, g, b){
        var hex = ((r<<16) | (g<<8) | b).toString(16);
        return "#" + new Array(Math.abs(hex.length-7)).join("0") + hex;
      }
      // hex 转换 rgb
      hexToRgb(hex){
        var rgb = [];
        for(var i=1; i<7; i+=2){
            rgb.push(parseInt("0x" + hex.slice(i,i+2)));
        }
        return rgb;
      }
}